<template>
	<div class="taskAnalysis">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 游戏内分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="统计日期:" :label-width="formLabelWidth">
						<el-date-picker
                            v-model="ruleForm.nowDate"
                            type="date"
                            placeholder="选择日期"
                            @change='nowChange'
                            :picker-options="pickerOptions0">
                            </el-date-picker>
					</el-form-item>
					<el-form-item label="平台：" :label-width="formLabelWidth"  prop="platForm">
						<el-select v-model="ruleForm.platForm" filterable  placeholder="请选择平台" @change="platChange">
							<el-option v-for="(val,key) in platForms" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>                    
					<el-form-item label="渠道名称：" :label-width="formLabelWidth"  prop="channel">
						<el-select v-model="ruleForm.channel" filterable  placeholder="请选择渠道名称"  @change="channelChange">
							<el-option v-for="(val,key) in channels" :label="val.id" :value="val.num" :key='val.num'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="全区服：" :label-width="formLabelWidth"  prop="server">
						<el-select v-model="ruleForm.server" filterable  placeholder="请选择全区服" @change="serverChange">
							<el-option v-for="(val,key) in servers" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="任务类型：" :label-width="formLabelWidth"  prop="tasktT">
						<el-select v-model="ruleForm.tasktT" filterable  placeholder="请选任务类型" @change="tasktTChange">
							<el-option v-for="(val,key) in tasktTs" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="任务名称：" :label-width="formLabelWidth"  prop="tasktU">
						<el-select v-model="ruleForm.tasktU" filterable  placeholder="请选择任务名称" @change="tasktUChange">
							<el-option v-for="(val,key) in tasktUs" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>					
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
				</el-form>
				<p style="color:#2eb398;text-align:center">（输入搜索条件，留空搜索全部！）</p>
			</div>
		</div>
		<div class="right_content">
			<div class="taskAnalysisTable"  style='margin-bottom:40px;'>
				<div class="taskAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						活跃用户主线任务转化情况
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('1','游戏内分析-任务分析-活跃用户主线任务转化情况')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
						
					</span>
				</div>
				<div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData' style="height:450px"></div>
				<div class="taskAnalysisTableBody fadeIn animated">
							<template>
							<el-table
								v-loading="loading"
								element-loading-text="拼命加载中"
								:data="tableData1"
								border
								@sort-change = "sortChage1"
								>
								<el-table-column sortable align="center"
									v-for="(col,key) in tableHead1"
									:prop="col.prop" :label="col.label" :key="col.prop" width="180">
								</el-table-column>
							</el-table>
							</template>						
					<div class="pages taskAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="taskAnalysisTable"  style='margin-bottom:40px;'>
				<div class="taskAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						新增用户主线任务转化情况
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('2','游戏内分析-任务分析-新增用户主线任务转化情况')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
				<div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData2' style="height:450px"></div>
				<div class="channelStatisticsTableBody fadeIn animated">
					<template>
						<el-table
							v-loading="loading"
							element-loading-text="拼命加载中"
							:data="tableData2"
							border
							@sort-change = "sortChage2"
							>
							<el-table-column sortable align="center"
								v-for="(col,key) in tableHead1"
								:prop="col.prop" :label="col.label" :key="col.prop" width="180">
							</el-table-column>
						</el-table>
					</template>
					<div class="pages taskAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="taskAnalysisTable"  style='margin-bottom:40px;'>
				<div class="taskAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						活跃用户完成情况
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('3','游戏内分析-任务分析-活跃用户完成情况')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
				<div class="channelStatisticsTableBody fadeIn animated">
					<template>
						<el-table
							v-loading="loading"
							element-loading-text="拼命加载中"
							:data="tableData3"
							border
							@sort-change = "sortChage3"
							>
							<el-table-column sortable align="center"
								v-for="(col,key) in tableHead1"
								:prop="col.prop" :label="col.label" :key="col.prop" width="180">
							</el-table-column>
						</el-table>
					</template>
					<div class="pages taskAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="taskAnalysisTable"  style='margin-bottom:40px;'>
				<div class="taskAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						新增用户完成情况
						 <el-button type="primary" size="mini" class="excel"  @click.stop="excel('4','游戏内分析-任务分析-新增用户完成情况')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
				<div class="channelStatisticsTableBody fadeIn animated">
					<template>
						<el-table
							v-loading="loading"
							element-loading-text="拼命加载中"
							:data="tableData4"
							border
							@sort-change = "sortChage4"
							>
							<el-table-column sortable align="center"
								v-for="(col,key) in tableHead1"
								:prop="col.prop" :label="col.label" :key="col.prop" width="180">
							</el-table-column>
						</el-table>
					</template>
					<div class="pages taskAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange4"
							@current-change="handleCurrentChange4"
							:current-page="page4.currentPage"
							:page-sizes="page4.pageSizes"
							:page-size="page4.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page4.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./taskAnalysis.styl"></style>
<script src="./taskAnalysis.js"></script>
